<template>
    <div class="list-container">
        <SearchPanel @onSearch="searchHandle" :loading="loading" :isTop="true" :isReset="true" class="searchForm">
            <el-form :model="searchValue" label-width="150px" label-position="right">
                <el-row>
                    <el-col :lg="8" :sm="12">
                        <el-form-item label="购买人姓名">
                            <el-input v-model="searchValue.name" placeholder="请输入购买人姓名" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="8" :sm="12">
                        <el-form-item label="性别">
                            <el-select v-model="searchValue.gender" value-key="" placeholder="请选择性别" clearable filterable>
                                <el-option key="0" label="全部" :value="0"> </el-option>
                                <el-option key="1" label="男" :value="1"> </el-option>
                                <el-option key="2" label="女" :value="2"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="8" :sm="12">
                        <el-form-item label="年龄">
                            <el-input v-model="searchValue.age" placeholder="请输入年龄" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :lg="8" :sm="12">
                        <el-form-item label="购买起始时间">
                            <el-date-picker
                                v-model="searchValue.startTime"
                                type="datetime"
                                placeholder="选择购买起始时间"
                                format="yyyy-MM-dd dd:mm:ss"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="8" :sm="12">
                        <el-form-item label="购买结束时间">
                            <el-date-picker v-model="searchValue.endTime" type="datetime" format="yyyy-MM-dd dd:mm:ss" placeholder="选择购买结束时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="8" :sm="12">
                        <el-form-item label="是/否去过高风险地">
                            <el-select v-model="searchValue.danger" value-key="" placeholder="请选择是/否去过高风险区域" clearable filterable>
                                <el-option key="0" label="全部" :value="null"> </el-option>
                                <el-option key="1" label="是" :value="true"> </el-option>
                                <el-option key="2" label="否" :value="false"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :lg="8" :sm="12">
                        <el-form-item label="药品分类">
                            <el-input v-model="searchValue.drugClassification" placeholder="请输入药品分类" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="8" :sm="12" v-if="window.sessionStorage.getItem('admin') == '1'">
                        <el-form-item label="药店名称">
                            <el-input v-model="searchValue.drugstoreName" placeholder="请输入药店名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </SearchPanel>
        <DataPanel>
            <el-table
                border
                :data="listData"
                style="width: 100%"
                v-loading="loading"
                :max-height="height"
                :header-cell-style="{ background: '#f6f6f6' }"
                ref="multipleTable"
            >
                <el-table-column prop="name" :show-overflow-tooltip="true" label="姓名"></el-table-column>
                <el-table-column prop="genderName" label="姓别"></el-table-column>
                <el-table-column prop="age" :show-overflow-tooltip="true" label="年龄"></el-table-column>
                <el-table-column prop="idNumber" :show-overflow-tooltip="true" label="身份证号"></el-table-column>
                <el-table-column prop="contactNumber" :show-overflow-tooltip="true" label="联系方式"></el-table-column>
                <el-table-column prop="enable" label="现居住地">
                    <template slot-scope="scope">
                        <div>{{ scope.row.province }}{{ scope.row.city }}{{ scope.row.area }}{{ scope.row.detailedAddress }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" :show-overflow-tooltip="true" label="销售时间"></el-table-column>
                <el-table-column prop="dangerName" :show-overflow-tooltip="true" label="是/否去过高风险区域名称"></el-table-column>
                <el-table-column
                    prop="drugstoreName"
                    :show-overflow-tooltip="true"
                    label="药店名称"
                    v-if="window.sessionStorage.getItem('admin') == '1'"
                ></el-table-column>
                <el-table-column prop="record" :show-overflow-tooltip="true" label="记录人"></el-table-column>
                <el-table-column prop="drugClassification" :show-overflow-tooltip="true" label="药品分类"></el-table-column>
                <el-table-column prop="remarks" :show-overflow-tooltip="true" label="备注"></el-table-column>
                <el-table-column prop="" label="操作" width="180">
                    <template slot-scope="scope">
                        <div class="operation">
                            <span @click="editHandle(scope.row.id)">编辑</span>&nbsp;&nbsp;&nbsp;&nbsp;
                            <!-- <span @click="delHandle(scope.row.id)">删除</span>&nbsp;&nbsp;&nbsp;&nbsp; -->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <pagination-panel :total="total" ref="pagination" @onPaginationChange="onPaginationChange"></pagination-panel>
        </DataPanel>
        <el-dialog :title="dTitle" :visible.sync="dialogVisible" width="40%">
            <el-form :model="form" ref="form" :rules="formRules" hide-required-asterisk>
                <el-form-item label="录入人:" prop="record" :label-width="'24%'" :rules="formRules.blur">
                    <el-col :span="16">
                        <el-select v-model="form.record" value-key="" placeholder="请选择录入人" clearable filterable>
                            <el-option v-for="item in recordList" :key="item.record" :label="item.record" :value="item.record"> </el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="药品分类:" prop="drugClassification" :label-width="'24%'" :rules="formRules.change">
                    <el-col :span="16">
                        <el-select v-model="form.drugClassification" value-key="" placeholder="请选择药品分类" clearable filterable>
                            <el-option
                                v-for="item in drugClassificationList"
                                :key="item.classAlias"
                                :label="item.classAlias"
                                :value="item.classAlias"
                            >
                            </el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="备注:" prop="remarks" :label-width="'24%'" :rules="formRules.blur">
                    <el-col :span="16">
                        <el-input class="w" type="textarea" v-model="form.remarks" placeholder="请输入备注"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" plain size="medium" @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" size="medium" @click="submitForm">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from 'vue-property-decorator';
import DataPanel from '@/components/DataPanel.vue';
import SearchPanel from '@/components/SearchPanel.vue';
import ButtonPanel from '@/components/ButtonPanel.vue';
import paginationPanel from '@/components/PaginationPanel.vue';
import { formRules } from '@/common/util/validator';
import { api } from '@/http/api';
import { Type } from '@/http/interface';
declare var $: any;

@Component({
    components: {
        SearchPanel,
        DataPanel,
        ButtonPanel,
        paginationPanel,
    },
})
export default class index extends Vue {
    formRules = formRules;
    public loading: boolean = false;
    public dialogVisible: boolean = false;
    public listData: any = [];
    public total: number = 0;
    public dTitle: string = '';
    public $refs: {
        form: HTMLFormElement;
        multipleTable: HTMLFormElement;
    };
    public searchPagin = {
        skip: 0,
        count: 10,
        currentPage: 1,
    };
    public searchValue: Type.InformationRecord_GetInformationRecordListReq = {
        name: '',
        gender: 0,
        startTime: '',
        endTime: '',
        danger: null,
        drugClassification: '',
        drugstoreName: '',
    };
    /**录入人列表 */
    recordList = [];
    /**药品分类列表 */
    drugClassificationList = [];
    /** 表单 */
    public form = {
        id: '',
        record: '',
        remarks: '',
        drugClassification: '',
    };
    height = 0;
    mounted() {
        this.loadData();
        /**获取药品分类 */
        api.DrugClassification_GetDrugClassificationList({}).then((res) => {
            this.drugClassificationList = res;
        });
        /**获取录入人 */
        api.RecordPeople_GetRecordPeopleByInfoList({}).then((res) => {
            this.recordList = res;
        });
        this.$nextTick(() => {
            setTimeout(() => {
                this.height = document.getElementsByClassName('data-container')[0].clientHeight - 80;
            }, 50);
        });
    }
    /** 查询 */
    public searchHandle() {
        this.loadData();
    }
    /**分页 */
    public async onPaginationChange(pagin) {
        this.searchPagin = pagin;
        this.loadData();
    }
    /**获取列表 */
    public async loadData() {
        this.loading = true;
        try {
            if (sessionStorage.getItem('admin') == '1') {
                var res = await api.InformationRecord_GetAdminInformationRecordList({
                    ...this.searchValue,
                    skip: this.searchPagin.skip,
                    count: this.searchPagin.count,
                });
            } else {
                var res = await api.InformationRecord_GetInformationRecordList({
                    ...this.searchValue,
                    skip: this.searchPagin.skip,
                    count: this.searchPagin.count,
                });
            }
            this.loading = false;
            this.listData = res.items;
            this.total = res.totalCount;
            if (this.total > 0 && this.listData.length == 0) {
                this.searchPagin.skip = 0;
                this.loadData();
            }
        } catch {
            this.loading = false;
        }
    }
    /** 编辑 */
    public editHandle(id) {
        this.form.id = id;
        this.dialogVisible = true;
        this.dTitle = '编辑录入信息';
    }
    /** 提交保存按钮 */
    public submitForm() {
        this.$refs.form.validate((valid) => {
            if (valid) {
                api.InformationRecord_PutInformationRecordInfoAsync(this.form).then(() => {
                    this.$message.success('编辑购买人记录成功');
                    this.form = {
                        id: '',
                        record: '',
                        remarks: '',
                        drugClassification: '',
                    };
                    this.dialogVisible = false;
                    this.loadData();
                });
            }
        });
    }
}
</script>

<style lang="scss" scoped>
.statuscolor1 {
    background: #ffca1b;
}
.statuscolor2 {
    background: red;
}
.statuscolor3 {
    background: #f53e3e;
}
.statuscolor4 {
    background: #b7cad7;
}
.statuscolor5 {
    background: #22cc31;
}
.statuscolor6 {
    background: #409eff;
}
.statusPrompt {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
}
.line-btn {
    background-color: #8162b9;
    border-color: #8162b9;
    color: #fff;
}
.line-btn:hover,
.line-btn:focus {
    background-color: #8162b9;
    border-color: #8162b9;
    opacity: 0.7;
    color: #fff;
}
i {
    cursor: pointer;
}

.w {
    width: 352px;
}
.operation span {
    cursor: pointer;
    color: #c50307;
}
.icon_font {
    position: absolute;
    top: 10px;
    right: 7px;
}
/deep/ input[type='password']::-ms-reveal {
    display: none;
}

.primary {
    position: relative;
    top: 1px;
    background-color: #c50307;
    border: #c50307;
}
.primary img {
    width: 16px;
}

.isEnable {
    width: 10px;
    height: 10px;
    background-color: #6dd400;
    border-radius: 10px;
}
.isDisable {
    width: 10px;
    height: 10px;
    background-color: #d8d8d8;
    border-radius: 10px;
}
.positontips {
    position: absolute;
    right: 152px;
    top: 0px;
}

.btnTree {
    margin-left: 40px;
}

.btnTree2 {
    float: right;
    margin-right: 20px;
}

/deep/ .el-dialog__body {
    border-top: 1px solid #e5e5e5;
    padding-top: 20px;
}

// /deep/.el-tree .el-tree-node__expand-icon.expanded {
//     -webkit-transform: rotate(0deg);
//     transform: rotate(0deg);
// }

// //有子节点 且未展开
// /deep/ .el-icon-caret-right:before {
//     background: url('../../../../assets/img/add.png') no-repeat 0 3px;
//     content: '';
//     display: block;
//     width: 15px;
//     height: 15px;
//     font-size: 16px;
//     background-size: 16px;
// }
// //有子节点 且已展开
// /deep/ .expanded.el-tree-node__expand-icon.el-icon-caret-right:before {
//     background: url('../../../../assets/img/reduce.png') no-repeat 0 3px;
//     content: '';
//     display: block;
//     width: 15px;
//     height: 15px;
//     font-size: 16px;
//     background-size: 16px;
// }
// //没有子节点
// /deep/ .is-leaf.el-tree-node__expand-icon.el-icon-caret-right:before {
//     background: none;
//     content: '';
//     display: block;
//     width: 15px;
//     height: 15px;
//     font-size: 16px;
//     background-size: 16px;
// }
</style>
